import { ModalController } from '@ionic/angular';
import { Component, OnInit, Input, ViewChild, ElementRef } from '@angular/core';
import { VideoPlayer } from '@ionic-native/video-player/ngx';
@Component({
  selector: 'app-photo-handle',
  templateUrl: './photo-handle.html',
  styleUrls: ['./photo-handle.scss'],
})
export class PhotoHandleModal implements OnInit {
  @Input() index: number;
  @Input() images: any;
  @Input() isLook: boolean;
  @Input() isRorate: boolean;
  // @ViewChild('photoSlide') slider;
  public sliderDom: any;
  public slideOpts: any;
  public titleIndex: number;
  constructor(
    public modalCtrl: ModalController,
    public videoPlayer: VideoPlayer,
  ) { }

  ngOnInit() {
    console.log(this.index, this.images);
    this.sliderDom = document.getElementsByClassName('photoHandle-content-slides')[0];
    this.slideOpts = {
      initialSlide: this.index,
      // loop: true,
      speed: 400
    };
    this.titleIndex = this.index;
  }

  close() {
    this.modalCtrl.dismiss();
  }

  delHandle() {
    this.images.splice(this.titleIndex, 1);
    this.titleIndex = this.titleIndex < this.images.length ? this.titleIndex : this.images.length - 1
    this.slideOpts = {
      initialSlide: this.titleIndex,
      ... this.slideOpts
    };
    if (!(this.images.length > 0)) {
      this.close();
    }
  }

  videoPlay(i) {
    // Playing a video.
    console.log('videoPlay')
    this.videoPlayer.play(this.images[i].filePath).then(() => {
      console.log('video completed');
    }).catch(err => {
      console.log(err);
    });
  }

  onSlideChange() {
    this.sliderDom.getActiveIndex().then((index) => {
      console.log(index)
      this.titleIndex = index <= this.images.length ? index : index - this.images.length;
    })
  }
}
